<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
                 [isDisabled]="!shouldRender(node)"
                 class="example-tree-node">
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.name}}
  </cdk-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                 cdkTreeNodeToggle
                 [cdkTreeNodeTypeaheadLabel]="node.name"
                 [style.display]="shouldRender(node) ? 'flex' : 'none'"
                 [isDisabled]="!shouldRender(node)"
                 (expandedChange)="node.isExpanded = $event"
                 class="example-tree-node"
                 tabindex="0">
    <button mat-icon-button cdkTreeNodeToggle
            [attr.aria-label]="'Toggle ' + node.name"
            [style.visibility]="node.expandable ? 'visible' : 'hidden'">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </cdk-tree-node>
</cdk-tree>
